<template>
  <div>
    <div id="actBar">
      <el-button type="primary" icon="el-icon-arrow-down" @click="toggleTreeDirection(false)" title="树向下展示"></el-button>
      <el-button type="primary" icon="el-icon-arrow-right" @click="toggleTreeDirection(true)" title="树向右展示"></el-button>
      <el-button type="primary" icon="el-icon-d-caret" @click="expandChange" title="展开/收起树"></el-button>

    </div>
    <div id="treeContent" :style="orgTreeStyle" @mousedown="mousedownView" @contextmenu="handleDocumentContextmenu">
      <vue2-org-tree
        :data="orgTreeData"
        :horizontal="horizontal"
        :label-class-name="labelClassName"
        :collapsable="collapsable"
        :render-content="renderContent"
        @on-expand="onExpand"
        @on-node-click="onNodeClick"
      />
    </div>
    <div class="zoom-box">
      <zoom-controller v-model="zoom" :min="20" :max="200"></zoom-controller>
    </div>
  </div>
</template>
<script>
const menuList = [
  {
    key: 'new',
    label: '新增节点'
  },
  {
    key: 'delete',
    label: '删除节点'
  }
]
import axios from 'axios'
import qs from 'qs'
import ZoomController from './zoom-controller.vue'
import {on,off} from './tools.js'
import {showLoading,hideLoading} from './loading.js'
import Cookies from 'js-cookie'
export default {
    name: "HelloWorld",
    components: {
        ZoomController: ZoomController
    },
    mounted () {
        this.orgTreeData = {//树的数据
            id: {
                nodeId: 1-1,
                preNodeId: 1,
                id: 2
            },
            label:"test",
            children: [
                {
                    id: {
                        nodeId: '123',
                        id: '123'
                    },
                    label: '和美1',
                    children: []
                }
            ]
        }
      //  this.getChildrenData(this.orgTreeData, localStorage.getItem('clickNodeId'))
        on(document, 'contextmenu', this.handleDocumentContextmenu)
    },
    beforeDestroy () {
        off(document, 'contextmenu', this.handleDocumentContextmenu)
    },
    data() {
        return {
            zoom: 100,
            orgTreeData: {
                id: {
                    id: ""
                }
            },//树的数据,
            detailData: {},//详情数据
            horizontal: true,//树的方向向下或者向右
            expandAll: false,//是否全部展开
            collapsable: true,//是否折叠
            labelClassName: "bg-default",//选择框颜色
            name: "HelloWorld",//详情名称.
            detailNodeName: "名称",
            addressInfo: 0,//详情位置信息
            addressList: [{id: 1, label: '底部'}, {id: 2, label: '中部'}, {id: 3, label: '左部'}, {
                id: 4,
                label: '右部'
            }, {id: 5, label: '右上角'}],//详情位置列表
            showType: 1,//详情显示类型
            showTypeList: [{id: 1, label: '按钮'}, {id: 3, label: '文本'}],//详情显示类型列表
            selectNode: "",//选择节点
            dialogTableVisible: false,//选择节点模态框的显示和隐藏
            uploadUrl: "",//上传url
            currentPage: 1,//节点当前页码
            showText: "我是显示文本",//详情显示文本
            showRadio: "1",//详情里面的是否显示
            showSize: 1,//详情显示排序
            nodeDetailShow: false,//控制详情页面的显示和隐藏
            isClickTrigger: true,//判断是否有click触发还是mousedown触发的
            orgTreeOffsetLeft: 0,
            orgTreeOffsetTop: 0,
            initPageX: 0,
            initPageY: 0,
            oldMarginLeft: 0,
            oldMarginTop: 0,
            canMove: false,
            currentContextMenuId: {
                id: "",
                clickId: "",
                isDelete: false
            },
            nodeDetailTile: "详情",//节点详情标题
            nodeModalSearch: "",//节点模态框搜索值
            isDelete: "",//当前编辑元素是否为删除元素
        };
    },
    methods: {
        renderContent(h, data) {
            return (
                <div
                    class= {['custom-org-node', data.children && data.children.length ? 'has-children-label' : '']}
                    on-mousedown = {event => event.stopPropagation() }
                    on-contextmenu = {this.contextmenu.bind(this, data)}>
                    { data.label}
                    <el-dropdown trigger = "custom" class= "context-menu" visible = {this.currentContextMenuId.clickId == data.id.clickId}
                        nativeOn-click = {this.handleDropdownClick}
                        style = {{transform: `scale(${this.treeContentScale}, ${this.treeContentScale})`}}
                        v-click-outside = {this.closeMenu}>
                        <span></span >
                        <el-dropdown-menu
                            slot = "dropdown"
                            style = {{ display: this.currentContextMenuId.clickId == data.id.clickId ? 'block' : 'none'}}>
                            {
                                menuList.map(item => {
                                    if (item.key == "delete" && this.currentContextMenuId.id == localStorage.getItem('clickNodeId')) {
                                        return false;
                                    } else {
                                        return (<el-dropdown-item nativeOn-click = {this.handleContextMenuClick}  name = {item.key}>
                                        {item.label}
                                        </el-dropdown-item>)
                                    }
                                })
                            }
                        </el-dropdown-menu >
                    </el-dropdown>
                </div>
            )
        },
    onExpand(data) {//点击展开时
        if ("expand" in data) {
            data.expand = !data.expand;
            if (!data.expand && data.children) {
                this.collapse(data.children);
            }
        } else {
            this.$set(data, "expand", true);
        }
        if (data.expand) {
            data.children = [];
        }
        this.getChildrenData(data, data.id)
    },

    onNodeClick(e, data) {//点击节点
        console.log("click node");
    },

    //展开
    collapse(list) {
        var _this = this;
        list.forEach(function (child) {
            if (child.expand) {
                child.expand = false;
            }
            child.children && _this.collapse(child.children);
        });
    },

    expandChange() {//展开收起树
        this.expandAll = !this.expandAll;
        this.toggleExpand(this.orgTreeData, this.expandAll);
    },

    toggleExpand(data, val) {//展开收起切换函数
        var _this = this;
        if (Array.isArray(data)) {
            data.forEach(function (item) {
                if (item.children[0].label != "和美1") {
                    _this.$set(item, "expand", val);
                    if (item.children && item.children[0].label && item.children[0].label != "和美1") {
                        _this.toggleExpand(item.children, val);
                    }
                }

            });
        } else {
            if (data.children[0].label && data.children[0].label != "和美1") {
                this.$set(data, "expand", val);
                if (data.children) {
                    _this.toggleExpand(data.children, val);
                }
            }
        }
    },
    toggleTreeDirection(value){//切换树的方向
        this.horizontal = value
    },

    getChildrenData(setList,id){//获取子节点数据
        axios.get('../../static/tree.json')
            .then(res =>{
                setList.children.push(res.data);
                console.log("res:",res);
            })
            .catch(error =>{
                console.log("error:",error);
            })
    },

        handleContextMenuClick(data){
            console.log("点击右键的下拉菜单");
            console.log("data:",data)
        },
    mousedownView (event) { // 鼠标拖动
        this.canMove = true
        this.initPageX = event.pageX
        this.initPageY = event.pageY
        this.oldMarginLeft = this.orgTreeOffsetLeft
        this.oldMarginTop = this.orgTreeOffsetTop
        on(document, 'mousemove', this.mousemoveView)
        on(document, 'mouseup', this.mouseupView)
    },
    mousemoveView (event) {// 鼠标拖动
        if (!this.canMove) return
        const {pageX, pageY} = event
        this.orgTreeOffsetLeft = this.oldMarginLeft + pageX - this.initPageX
        this.orgTreeOffsetTop = this.oldMarginTop + pageY - this.initPageY
    },
    mouseupView () {
        console.log(888);
        this.canMove = false
        off(document, 'mousemove', this.mousemoveView)
        off(document, 'mouseup', this.mouseupView)
        return false
    },

    contextmenu (data, $event) { //右键节点事件
        console.log("data:",data);
        let event = $event || window.event;
        event.preventDefault
            ? event.preventDefault()
            : (event.returnValue = false)

        this.currentContextMenuId = {
            id: data.id.id,
            clickId: data.id.clickId,
            isDelete: data.id.isDelete
        };
    },
    handleDropdownClick (event) {
        event.stopPropagation()
    },
    handleDocumentContextmenu () { //右键菜单
        this.canMove = false
    },

    closeMenu () {
        this.currentContextMenuId = {
            id: "",
            clickId: "",
            isDelete: false
        }
    },
    nodeEntryToggle(){//节点入口切换
        this.nodeEntryIsFlod = !this.nodeEntryIsFlod;
    },

},
    watch: {},
    computed: {
          treeContentScale () {
              return this.zoom / 100
          },
          orgTreeStyle () {
              return {
                  transform: `translate(-25%, -25%) scale(${this.zoom / 100}, ${this.zoom / 100})`,
                  marginLeft: `${this.orgTreeOffsetLeft + 300}px`,
                  marginTop: `${this.orgTreeOffsetTop + 200}px`
              }
          }
      }

}
</script>
<style lang="less">
#actBar{
  width: 200px;
  height: 80px;
  z-index: 999;
  position: fixed;
  top: 20px;
  right: 20px;
  background: #ffffff;
  //box-shadow: 1px 1px 4px 0 #0a0a0a2e;
  .el-button{
    float: left;
    margin:20px 0 0 10px;
  }
  .el-select{
    float: left;
    margin-top: 20px;
    margin-left: 10px;
    border-radius: 3px;
    width: 135px;
    input,i{
      background: #409EFF;
      border-color: #409EFF;
      color: #FFF;
    }
  }
}
#treeContent{
  margin-top: 100px;
}
#nodeDetail{
  position: fixed;
  top: 0;
  right: 0;
  background: white;
  width: 80%;
  height: 100%;
  border: 1px solid #ccc;
  z-index: 1999;
  border-radius: 3px 0 0 3px;
  .el-input{
    width: 100%;
  }
  .el-pagination__editor.el-input{
    width: 50px;
  }
  .info{
    .title{
      padding-left: 10px;
      border-bottom: 1px solid #ccc;
      height: 30px;
      line-height:30px;
      .el-icon-close{
        position: absolute;
        top: 7px;
        right: 10px;
      }
    }
  }
  .el-form-item__label{
    text-align: center
  }
  .hasMust .el-form-item__label::before{
    content: "*";
    color: red;
  }
  .el-form-item__content{
    margin-right: 30px;
    .el-radio{
      float: left;
      margin-top: 14px;
    }
  }
  .el-collapse-item__content{
    .el-button{
      float: left;
      margin-left: 6%;
    }
  }
  .el-form-item{
    margin-bottom: 5px;
  }
  .el-select{
    width: 100%;
  }
  .upload-demo{
    float: left;
    width: 270px;
    .el-upload{
      margin-left: -189px;
    }
    .el-upload__tip{
      text-align: left;
    }
    .el-upload-list{
      margin-left: -22px;
    }
  }
  .el-dialog{
    width: 700px;
  }
  .content{
    overflow: auto;
    height: calc(100vh - 30px);
  }
  .el-collapse{
    .el-form-item__content{
      position: relative;
      .el-input,.el-textarea{
        width: 85%;
      }
      .el-checkbox{
        width: 36px;
      }
      .el-icon-close{
        position: absolute;
        top:13px;
        left: -23px;
        color: #1B9BFC;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
      }
    }
  }
  .dialog-footer{
    margin-top: 40px;
  }
  .dialog-footer>button{
    float: right;
    margin: -20px 10px 0 10px;
  }
  .content-footer>button{
    float: right;
    margin: 0 10px;
  }
  .nodeSelectItem{
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
  }
  .el-table::before{
    height: 0;
  }
  .modalSearch{
    float: right;
    font-weight: 600;
    .el-input{
      width: 160px;
      height: 30px;
      margin-bottom: 10px;
      margin-left: 10px;
      .el-input__inner{
        height: 30px;
        border-radius: 50px;
      }
    }
  }
  .el-dialog__header{
    text-align: left;
  }
}
#nodeModal{
  .el-table{
    height: 300px;
    overflow: auto;
  }
}
#contextMenu{
  &.dropdownShow{
    display: block !important;
  }
  &.dropdownNone{
    display: none  !important;
  }
  list-style: none;
  padding: 0;
  background: white;
  color: #000;
  border: 1px solid #ccc;
  li:hover{
    background: #ccc;
    cursor: pointer;
  }
}
.zoom-box{
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 999;
}
.org-tree-node-label {
  white-space: nowrap;
}
.org-tree-node-label-inner{
  background: #738699;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  word-wrap: none;
  white-space: nowrap;
  border-radius: 4px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.nodeEntryShowInput{
  width: 95%;
  margin-left: 5%;
}
.wildcardQuestionResultSuccess{
  color: green;
  line-height: 48px;
  text-align: left;
  padding-left: 10px;
}
.wildcardQuestionResultError{
  color: red;
  line-height: 48px;
  text-align: left;
  padding-left: 10px;
}
.bg-white {
  background-color: white;
  color: #000;
}
.bg-orange {
  background-color: orange;
}
.bg-gold {
  background-color: gold;
}
.bg-gray {
  background-color: gray;
}
.bg-lightpink {
  background-color: lightpink;
}
.bg-chocolate {
  background-color: chocolate;
}
.bg-tomato {
  background-color: tomato;
}
.bg-default{
  background-color: #738699;
}
.bg-eee{
  input,textarea{
    background-color: #eee !important;
    color: #000 !important;
  }
  background-color: #eee;
}
.isDelete{
  background-color: #aaa;
}
.el-select-dropdown{
  z-index: 99999999999999999 !important;
}
.el-dropdown{
  z-index: 999999999999999999 !important;
}
.el-form-item .el-checkbox.is-bordered{
  padding: 11px 20px 9px 10px
}

::-webkit-scrollbar {/*滚动条整体样式*/
  width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #ccc;
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: #EDEDED;
}
</style>
